<template>
  <div class="containerpop">
    <div class="popup-content">
      <h3>添加链接</h3>
      <div class="input-group">
        <label for="url">网址：</label>
        <input type="text" id="url" v-model="url" placeholder="请输入网址" />
      </div>
      <div class="input-group">
        <label for="name">名称：</label>
        <input type="text" id="name" v-model="name" placeholder="请输入名称" />
      </div>

      <!-- 自定义图片区域 -->
      <div class="input-group custom-image-group">
        <!-- 图标颜色选择 -->
        <div class="color-group">
          <label>图标颜色</label>
          <div class="color-options">
            <div
              v-for="(color, index) in colors"
              :key="index"
              class="color-option"
              :style="{ backgroundColor: color }"
              @click="bgColor = color"
            ></div>
          </div>
        </div>

        <!-- 图标文字 -->
        <div class="input-group icon-text-group">
          <label for="icon-text">图标文字：</label>
          <input
            type="text"
            id="icon-text"
            v-model="iconname"
            placeholder="图标文字"
            maxlength="4"
          />
        </div>

        <!-- 文字图标和上传按钮 -->
        <div class="icon-actions">
          <!-- 文字图标预览 -->
          <div class="icon-preview">
            <div class="icon-background" :style="{ backgroundColor: bgColor }">
              <div class="icon-text">{{ iconname }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="input-group">
        <label for="category">分类：</label>
        <select id="category" v-model="navid" class="custom-select">
          <option
            v-for="(nav, index) in navconfig"
            :key="index"
            :value="nav.id"
          >
            {{ nav.name }}
          </option>
        </select>
      </div>

      <div class="button-group">
        <button @click="confirm" class="confirm-btn">确定</button>
        <button @click="cancel" class="cancel-btn">取消</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps, computed } from "vue";
import { useStore } from "vuex";
import { nanoid } from "nanoid";

const store = useStore();

const props = defineProps({
  shutdown: {
    type: Function,
    required: false,
    default: null,
  },
});

const url = ref("");
const name = ref("");
const iconname = ref(""); // 用于图标文字
const navid = ref("");
const bgColor = ref("#ffd600"); // 背景颜色

// 颜色选项
const colors = [
  "#ffd600",
  "#3498db",
  "#e74c3c",
  "#2ecc71",
  "#9b59b6",
  "#1abc9c",
  "#f1c40f",
  "#e67e22",
  "#34495e",
  "#16a085",
  "#27ae60",
  "#2980b9",
  "#8e44ad",
  "#c0392b",
  "#f39c12",
];

const navconfig = computed(() => {
  return store.getters["getnavconfig"].map((item) => ({
    id: item.id,
    name: item.name,
  }));
});

const confirm = () => {
  const data = {
    id: nanoid(6),
    url: url.value,
    name: name.value,
    iconname: iconname.value,
    backgroundColor: bgColor.value,
    childrens: [],
    size: "1x1",
    src: "",
    type: "icon",
  };

  const newChildren = [
    ...(store.getters["getnavconfig"].find((m) => m.id === navid.value)
      ?.children || []),
    data,
  ];

  console.log("newChildren", newChildren);

  store.commit("ADD_CHILD_TO_NAV", {
    navId: navid.value,
    newchild: newChildren,
  });

  // 关闭弹窗
  props.shutdown();
};

const cancel = () => {
  if (props.shutdown) {
    props.shutdown();
  }
};
</script>

<style scoped>
.containerpop {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.popup-content {
  background-color: #f5f5f5;
  padding: 25px;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h3 {
  margin-top: 0;
  margin-bottom: 20px;
  color: #333;
}

.input-group {
  margin-bottom: 20px;
  text-align: left;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.input-group input,
.custom-select {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.input-group input:focus,
.custom-select:focus {
  border-color: #4caf50;
  outline: none;
}

.custom-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 1em;
}

/* 自定义图片区域样式 */
.custom-image-group {
  text-align: left;
}

.color-group {
  margin-bottom: 15px;
}

.color-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.color-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.color-option {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
}

.color-option:hover {
  transform: scale(1.1);
}

.icon-text-group {
  margin-bottom: 15px;
}

.icon-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.icon-preview {
  position: relative;
  cursor: pointer;
}

.icon-background {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-text {
  color: rgba(0, 0, 0, 0.87);
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  word-wrap: break-word; /* 允许文字换行 */
  padding: 5px; /* 添加内边距以确保文字不超出容器 */
}

.upload-container {
  position: relative;
}

#image {
  display: none;
}

.upload-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border: 1px dashed #ccc;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.upload-label:hover {
  border-color: #4caf50;
}

.upload-icon {
  font-size: 24px;
  color: #999;
}

.upload-text {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
}

/* 按钮组样式 */
.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
}

.confirm-btn,
.cancel-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.confirm-btn {
  background-color: #4caf50;
  color: white;
}

.confirm-btn:hover {
  background-color: #45a049;
}

.cancel-btn {
  background-color: #f44336;
  color: white;
}

.cancel-btn:hover {
  background-color: #e53935;
}
</style>
